<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bootstrap5 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!--    加载动画 css 文件-->
    <link rel="stylesheet" href="/css/pageLoading.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        input{
            border: none;
        }

        a{
            color: rgb(206, 90, 90);
            text-decoration: none;
            cursor: pointer;
        }

        input[type='button']{
            background-color: rgb(128, 209, 234);
        }

        input[type='button']:active{
            background-color: rgb(117, 178, 239);
        }

    </style>
</head>
<body>
<!-- 加载动画 -->
<div class="loader loader-div">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>

<div class="container mt-3">
    <!-- 使表格设定在指定屏幕宽度以下显示滚动条 -->
    <div class="table-responsive-sm">
        <table class="table table-striped table-bordered table-hover ">
            <thead>
            <tr>
                <th class="col-8">计划</th>
                <th class="col-2"><input type="button" class="btn-incr" value="新增"></th>
            </tr>
            </thead>
            <tbody>
            <tr class="tr-d" th:each="item : ${itemList}">
                <td th:text="${item.getPlan()}">plan</td>
                <td>
                    <a class="btn-d" th:href="@{'/delete?id=' + ${item.getId()} }">删除</a> &nbsp;&nbsp;
                </td>

            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="/js/jQuery.js"></script>
<!--    加载动画-->
<script src="/js/pageLoading.js"></script>
<script>
    $(function () {
        // 包装请求的数据参数
        $('.btn-incr').click(function () {
                let planName = prompt("输入计划");
                let params = {
                    "planName" : planName
                };
                httpPost('/increase', params);
        })
    })
    // 虚拟表单提交数据
    function httpPost(url, param){
        let planName = param['planName'];
        // alert(planName);
        let form = $("<form action=\"" + url + "\" method=\"post\" style=\"display: none\">\n" +
            "                    <input type=\"text\" name=\"plan\" value=\"" + planName + "\">\n" +
            "                </form>");
        form.css("display", "none");
        $("body").append(form);
        form.submit();
    }
</script>

<!--    $('.btn-d').click(function (){-->
<!--        // 获取同一类的元素的下标 i-->
<!--        let i = $('.btn-d').index(this);-->
<!--        $('.tr-d')[i].remove();-->
<!--    })-->

</body>
</html>